<template>
  <ContainerGroup>
    <Container style="margin-bottom:10px;">
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        @submit="handleSearch"
        @reset="handlerReset"
      >
        <!-- <Button icon="add" @click="handleAdd">新增</Button> -->
      </FilterForm>
    </Container>
    <Container height="fill" display="flexY">
      <Table
        :columns="tableColumns"
        :loading="tableLoading"
        :data="tableData"
        :pagination="{
          total: total,
          current: currentPage,
          pageSize: pageSize,
        }"
        @paginationChange="pageChange"
      >
        <!-- <template #n1Count="{row}">
          <el-switch
            v-model="row.isStsffRepresent"
            :width="50"
            active-color="#217dfa"
            inactive-color="#E5E5E5"
            :active-value="'1'"
            :inactive-value="'0'"
          />
        </template>-->
        <template #caozuo="{ row }">
          <Tooltip content="查看数据项" icon="view" @click="handleLookData(row)" />
          <Tooltip content="编辑" icon="edit" @click="handleEidt(row)" />
          <!-- <Tooltip content="编辑" icon="delete" @click="handleDelete(row)" /> -->
        </template>
      </Table>
      <!-- 新增、编辑 -->
      <Drawer
        :title="title"
        :visible="isShow"
        :header-color="'#e7ecf8'"
        width="500px"
        :loading="confirmLoading"
        :footer-btns="[
          {
            text: '确定',
            type: 'primary',
            trigger: 'submit',
          },
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel',
          },
        ]"
        @cancel="isShow = false"
        @submit="handleSubmit"
      >
        <el-form
          v-if="isShow"
          ref="ruleForm"
          size="mini"
          :model="ruleForm"
          :rules="rules"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="字典名称" prop="dictName">
            <el-input v-model.trim="ruleForm.dictName" placeholder="请输入字典名称" />
          </el-form-item>
          <el-form-item label="字典编码">
            <el-input v-model.trim="ruleForm.dictCode" placeholder="请输入字典编码" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model.trim="ruleForm.dictDescription"
              type="textarea"
              :rows="5"
              placeholder="请输入描述"
              maxlength="300"
            />
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch
              v-model="ruleForm.enableFlag"
              :width="50"
              active-color="#217dfa"
              inactive-color="#E5E5E5"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-form>
      </Drawer>
    </Container>
  </ContainerGroup>
</template>
<script>
import {
  zxDatadictPage,
  zxDatadictUpdate
} from '@/apis/specialFunds/systermSetting'
export default {
  name: 'DataDictionaries', // 数据字典
  data() {
    return {
      confirmLoading: false,
      ruleForm: {
        dictName: '',
        dictCode: '',
        dictDescription: '',
        enableFlag: 1
      },
      rules: {
        dictName: [
          { required: true, message: '请输入字典名称', trigger: 'blur' }
        ]
      },
      filterElements: [
        {
          key: 'dictName',
          type: 'input',
          label: '字典名称',
          value: ''
        }
      ],
      title: '添加字典',
      tableColumns: [
        {
          title: '字典名称',
          dataIndex: 'dictName',
          width: 200
        },
        {
          title: '字典编码',
          dataIndex: 'dictCode',
          width: 100
        },
        // {
        //   title: '是否启用',
        //   dataIndex: 'n1Count',
        //   type: 'otherTag'
        // },
        {
          title: '描述',
          dataIndex: 'dictDescription'
        },
        {
          title: '操作',
          width: 160,
          dataIndex: 'caozuo',
          type: 'otherTag'
        }
      ],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      tableData: [],
      newCondition: {},
      isShow: false,
      btnType: 1,
      rowData: null
    }
  },
  created() {},
  methods: {
    handleSubmit() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          const param = {
            ...this.ruleForm
          }
          this.confirmLoading = true
          let api = ''
          if (this.btnType === 2) {
            // 编辑
            param.id = this.rowData.id
            api = zxDatadictUpdate
          } else {
            // 新增
          }
          api(param).then(res => {
            this.confirmLoading = false
            this.isShow = false
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.getData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClearForm() {
      for (const key in this.ruleForm) {
        if (key === 'enableFlag') {
          this.ruleForm[key] = 1
        }
        this.ruleForm[key] = ''
      }
    },
    handleLookData(row) {
      // 查看数据项
      this.$router.push({
        path: '/systerm-setting/dataDictionaries/item',
        query: {
          id: row.dictCode
        }
      })
      // this.getDetails()
    },
    getDetails() {},
    handleEidt(row) {
      // 编辑
      this.rowData = row
      this.title = '编辑字典'
      this.btnType = 2
      this.isShow = true
      this.handleClearForm()
      this.setDetails(this.rowData)
    },
    setDetails(row) {
      for (const key in this.ruleForm) {
        this.ruleForm[key] = row[key]
      }
    },
    handleDelete() {
      this.$confirm({
        content: '是否确认删除该用户？',
        title: '温馨提示',
        okFn: res => {
          // deleteById(row.id).then(res => {
          //   if (res.data.code === 200) {
          //     this.$message({
          //       type: 'success',
          //       message: '删除成功!'
          //     })
          //     this._getData()
          //   }
          // })
        },
        cancelFn: res => {
          console.log('取消')
        }
      })
    },
    handleAdd() {
      this.title = '添加字典'
      this.btnType = 1
      this.isShow = true
      this.handleClearForm()
    },
    handleSearch(value) {
      this.newCondition = value
      this.currentPage = 1
      this.getData()
    },
    getData() {
      const params = {
        dictName: this.newCondition?.dictName,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }
      this.tableLoading = true
      zxDatadictPage(params)
        .then(res => {
          this.tableLoading = false
          if (res.data.code === 200) {
            this.tableData = res.data.data.list
            this.total = res.data.data.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handlerReset(val) {
      this.handleSearch()
    },
    pageChange(payload) {
      this.currentPage = payload.current
      this.pageSize = payload.pageSize
      this.getData()
    }
  }
}
</script>
<style lang="less" scoped>
.demo-ruleForm {
  margin: 10px 15px;
}
</style>
